<template>
  <div id="Tmap"></div>
</template>
<script>
export default {
  name: "MapComponent",
  data() {
    return {
      geojsonData: {
        // 你的GeoJSON数据对象
      }
    };
  },
  async mounted() {
  //1
    mapboxgl.accessToken =
      "pk.eyJ1Ijoibmlja3p4dyIsImEiOiJja3hlYXI3NDQxYjhmMnVtZnRveTlxZGwwIn0.0Ude29mpR0-A0Z2Xf3PD2A";
    var map = new mapboxgl.Map({
      container: "Tmap",
      style: "mapbox://styles/mapbox/light-v10",
      center: [104.06932, 30.65999],
      zoom: 4
    });
    map.on("load", function() {
      map.addSource("states", {
        type: "vector",
        //url: "mapbox://mapbox.us_census_states_2015"
        // 'scheme': 'tms',TMS
        tiles: [
          "http://localhost:8080/geoserver/testXXX/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=testXXX:china&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&FORMAT=application/vnd.mapbox-vector-tile&TILECOL={x}&TILEROW={y}"
        ]
      });

      map.addLayer(
        {
          id: "states-join",
          type: "line",
          source: "states",
          "source-layer": "china",
          paint: {
            "line-color": "#0088cc"
          }
        }
        // "waterway-label"
      );
    });
  }
};
</script>
 
<style>
#Tmap {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}
</style>